<template>
  <div v-if="data.details"
       class="good-detail">
    <div class="top">
      <good-info-item v-for="item in data.details.properties"
                      :label="item.name"
                      label-align="flex-start"
                      label-width="100px"
                      width="47%">
        {{ item.value }}
      </good-info-item>
    </div>
    <div class="bottom">
      <img v-for="img in data.details.pictures"
           :key="img"
           v-lazy="img"/>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import GoodInfoItem from '@/components/library/GoodInfoItem.vue'
import type {GoodDetail} from '@/types/good'

defineProps<{
  data: GoodDetail
}>()
</script>

<style lang="less"
       scoped>
.good-detail {
  background-color: #fff;
  padding: 40px;

  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    line-height: 30px;

    > * {
      margin-bottom: 30px;
    }
  }

  .bottom {
    img {
      width: 100%;
    }
  }
}
</style>